<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css" />
    <link rel="stylesheet" href="/css/public.css" />
    <style>
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div style="background-color: white">
      <div class="title layui-card-header">
        <div>文章类别管理</div>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm">
          添加类别
        </button>
      </div>
      <form class="layui-card-body layui-form" action="" lay-filter="usermsg">
        <table class="layui-table">
          <colgroup>
            <col width="40%" />
            <col width="40%" />
            <col />
          </colgroup>
          <thead>
            <tr>
              <th>分类名称</th>
              <th>分类别名</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </form>
    </div>

    <script src="/lib/jquery.js"></script>
    <script src="/lib/template-web.js"></script>
    <script src="/lib/layui/layui.all.js"></script>
    <script src="/js/setAjax.js"></script>
  </body>
  <!-- 渲染页面模板 -->
  <script type="text/html" id="gethtml">
    {{each data val}}
    <tr>
      <td>{{val.name}}</td>
      <td>{{val.alias}}</td>
      <td>
        <button
          data-id="{{val.Id}}"
          data-name="{{val.name}}"
          data-alias="{{val.alias}}"
          type="button"
          class="layui-btn layui-btn layui-btn-xs"
        >
          编辑
        </button>
        <button
          data-id="{{val.Id}}"
          data-name="{{val.name}}"
          data-alias="{{val.alias}}"
          type="button"
          class="layui-btn layui-btn-danger layui-btn layui-btn-xs"
        >
          删除
        </button>
      </td>
    </tr>
    {{/each}}
  </script>
  <!-- 渲染页面模板 -->

  <!-- 添加类别模板 -->
  <script type="text/html" id="addclass">
    <form
      id="add-form"
      class="layui-form"
      action=""
      style="margin-top: 15px; margin-right: 50px;"
    >
      <!-- 第一行 分类名称 -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="name"
            required
            lay-verify="required"
            placeholder="请输入标题"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <!-- 第二行 分类别名  -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类别名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="alias"
            required
            lay-verify="required"
            placeholder="请输入标题"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <!-- 第三行 按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">
            确认添加
          </button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </script>
  <!-- 添加类别模板 -->

  <!-- 编辑按钮模板 -->
  <script type="text/html" id="edit">
    <form
      id="edit-form"
      class="layui-form"
      action=""
      style="margin-top: 15px; margin-right: 50px;"
      lay-filter="abcd"
    >
      <!-- 第一行 分类名称 -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="name"
            required
            lay-verify="required"
            placeholder="请输入标题"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <!-- 第二行 分类别名  -->
      <div class="layui-form-item">
        <label class="layui-form-label">分类别名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="alias"
            required
            lay-verify="required"
            placeholder="请输入标题"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
      <!-- 第三行 按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <input type="hidden" name="id" />
          <button class="layui-btn" lay-submit lay-filter="formDemo">
            确认修改
          </button>
        </div>
      </div>
    </form>
  </script>

  <!-- 编辑按钮模板 -->

  <script src="/lib/layui/layui.all.js"></script>
  <script src="/lib/jquery.js"></script>
  <script src="/lib/template-web.js"></script>
  <script src="/js/setAjax.js"></script>
  <script>
    let form = layui.form;

    //渲染页面
    function createhtml() {
      $.ajax({
        url: "/my/article/cates",
        success: function (res) {
          if (res.status === 0) {
            let createhtml = template("gethtml", res);
            $("tbody").html(createhtml);
          }
        },
      });
    }

    //--------------------------添加类别按钮------------------------------
    let closeAdd;
    $("button:contains('添加类别')").on("click", function () {
      closeAdd = layer.open({
        type: 1,
        title: "在线调试",
        content: $("#addclass").html(),
        area: ["500px", "250px"],
      });
    });

    createhtml();

    //给添加类别绑定点击事件
    $("body").on("submit", "#add-form", function (e) {
      e.preventDefault();
      $.ajax({
        type: "post",
        url: "/my/article/addcates",
        data: $(this).serialize(),
        success: function (res) {
          layer.msg(res.message);
          if (res.status === 0) {
            createhtml();
            layer.close(closeAdd);
          }
        },
      });
    });

    //--------------------------添加类别按钮------------------------------

    //--------------------------  编辑按钮  --------------------------------
    let closeedit;
    $("form").on("click", "button:contains('编辑')", function () {
      let data = $(this).data();
      closeedit = layer.open({
        type: 1,
        title: "修改文章分类",
        content: $("#edit").html(),
        area: ["500px", "250px"],
        success: function () {
          form.val("abcd", data);
        },
      });
    });

    $("body").on("submit", "#edit-form", function (e) {
      e.preventDefault();
      let data = $(this).serializeArray();
      data[2].name = "Id";
      console.log(data);
      $.ajax({
        type: "post",
        url: "/my/article/updatecate",
        data,
        success: function (res) {
          layer.msg(res.message);
          if (res.status === 0) {
            layer.close(closeedit);
            createhtml();
          }
        },
      });
    });
    //--------------------------  编辑按钮  --------------------------------

    //--------------------------  删除按钮  --------------------------------
    $("form").on("click", "button:contains('删除')", function () {
      let delid = $(this).data("id");
      layer.confirm("你确定删除吗？", function (index) {
        $.ajax({
          url: "/my/article/deletecate/" + delid,
          success: function (res) {
            layer.msg(res.message)
            if (res.status === 0) {
              createhtml();
              layer.close(index)
            }
          },
        });
      });
    });

    //--------------------------  删除按钮  --------------------------------
  </script>
</html>
